<template>
  <div>
    <div
      v-for="(item, index) in data"
      :key="index"
      :style="{
        display: allLeaf(item.children) ? 'block' : 'block',
        borderBottom: ceng == 1 ? '1px dashed #D9D9D9' : 'none',
        marginBottom: ceng == 1 ? '16px' : '8px'
      }"
      class="line"
    >
      <p
        class="title next-leaf"
        v-if="allLeaf(item.children, item.leaf)"
        :style="{ fontWeight: ceng == 1 ? '500' : 'normal', marginBottom: '12px', color: ceng == 1 ? 'rgba(0,0,0,0.85)' : 'rgba(0,0,0,0.65)' }"
      >
        {{ item.title }}
        <span style="line-height: 30px; display: inline-block; white-space: nowrap" v-if="item.isMuilt == 1">(多选)</span>
        <span style="line-height: 30px; display: inline-block; white-space: nowrap" v-if="item.isMuilt == 0">(单选)</span>：
      </p>
      <p class="title" v-else :style="{ fontWeight: ceng == 1 ? 'bold' : 'normal', marginBottom: ' 8px' }">{{ item.title }}</p>
      <template v-if="allLeaf(item.children, item.leaf)">
        <template v-if="item.isMuilt == 1 && item.children">
          <a-checkbox-group @change="e => onCheckChange(e, item)" :defaultValue="defaultCheckValue(item, currentChecks)">
            <div class="all-leaf">
              <p v-for="(nextItem, nextIndex) in item.children" :key="nextIndex" class="tag">
                <a-checkbox :value="nextItem.code" :disabled="checkDisabled">{{ nextItem.title }}</a-checkbox>
              </p>
            </div>
          </a-checkbox-group>
        </template>
        <template v-if="item.isMuilt == 0 && item.children">
          <!-- <a-radio-group
            name="radioGroup"
            v-model="item.radioValue"
            @change="e => onRadioChange(e, item)"
            :defaultValue="defaultRadioValue(item, currentChecks)"
          >
            <div class="all-leaf">
              <p v-for="(nextItem, nextIndex) in item.children" :key="nextIndex" class="tag">
                <a-radio :value="nextItem.code" :disabled="checkDisabled">{{ nextItem.title }}</a-radio>
              </p>
            </div>
          </a-radio-group> -->
          <a-checkbox-group @change="e => onRadioChange(e, item)" :defaultValue="defaultRadioValue(item, currentChecks)" v-model="item.radioValue">
            <div class="all-leaf">
              <p v-for="(nextItem, nextIndex) in item.children" :key="nextIndex" class="tag">
                <a-checkbox :value="nextItem.code" :disabled="checkDisabled">{{ nextItem.title }}</a-checkbox>
              </p>
            </div>
          </a-checkbox-group>
        </template>
      </template>
      <template v-else>
        <div class="next-tree">
          <tree-modal :treeData="item.children" @update="update" :currentTags="currentChecks" :checkDisabled="checkDisabled" :level="ceng"></tree-modal>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  name: 'treeModal',
  props: {
    treeData: {
      type: Array,
      default: null
    },
    currentTags: {
      type: Array,
      default: null
    },
    level: {
      type: Number,
      default: 0
    },
    checkDisabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      data: [],
      parentIds: [],
      currentChecks: [],
      ceng: 0
    }
  },
  computed: {
    allLeaf: () => {
      return (list, leaf) => {
        if (!leaf && list) {
          let result = list.filter(item => item.leaf)
          if (result.length == list.length) {
            return true
          } else {
            return false
          }
        } else {
          return true
        }
      }
    },
    defaultCheckValue: () => {
      return (item, currentChecks) => {
        if (currentChecks.length > 0) {
          let arr = []
          if (item.children && item.children.length > 0) {
            for (var i = 0; i < item.children.length; i++) {
              const obj = item.children[i]
              const result = currentChecks.filter(value => value == obj.code)
              if (result.length > 0) {
                arr.push(result[0])
              }
            }
            return arr
          } else {
            return []
          }
        } else {
          return []
        }
      }
    },
    defaultRadioValue: () => {
      return (item, currentChecks) => {
        if (currentChecks.length > 0) {
          let str = ''
          if (item.children) {
            for (var i = 0; i < item.children.length; i++) {
              const obj = item.children[i]
              const result = currentChecks.filter(value => value == obj.code)
              if (result.length > 0) {
                str = obj.code
              }
            }
            console.log(str)
            return [str]
          }
        }
        return []
      }
    }
  },
  watch: {
    treeData: {
      handler(newValue) {
        this.data = JSON.parse(JSON.stringify(newValue))
      },
      deep: true
    },
    currentTags: {
      handler(newValue, oldValue) {
        // console.log(newValue,oldValue)
        this.currentChecks = JSON.parse(JSON.stringify(newValue))
      },
      deep: true
    }
  },
  mounted() {
    this.data = JSON.parse(JSON.stringify(this.treeData))
    this.currentChecks = JSON.parse(JSON.stringify(this.currentTags))
    this.ceng = this.level + 1
    // console.log(this.data,this.currentChecks)
  },
  methods: {
    onCheckChange(value, item) {
      console.log(value, item)
      // item.checkValue = value
      console.log(item)
      let obj = {
        codes: value,
        code: item.code
      }
      this.$emit('update', obj)
    },
    onRadioChange(e, item) {
      console.log(e, item)
      let arr = e.slice(-1, e.length)
      item.radioValue = arr
      let obj = {
        codes: arr,
        code: item.code
      }
      this.$emit('update', obj)
    },
    update(obj) {
      this.$emit('update', obj)
    }
  }
}
</script>
<style lang="less" scoped>
.title {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 20px;
  white-space: nowrap;
  margin-right: 12px;
}
.all-leaf {
  display: flex;
  flex-wrap: wrap;
  line-height: 30px;
  .tag {
    margin: 0;
    // margin:0 8px 8px 0;
    // padding: 2px 6px;
    // border: 1px solid #d3d3d3;
    // border-radius: 4px;
    // cursor: pointer;
  }
  /deep/ .ant-radio-wrapper {
    border: 1px solid rgba(0, 0, 0, 0.15);
    margin-right: 12px;
    margin-bottom: 12px;
    border-radius: 2px;
    .ant-radio {
      display: none;
    }
    span.ant-radio + * {
      line-height: 28px;
    }
  }
  /deep/ .ant-radio-wrapper-checked {
    color: #1890ff;
    border: 1px solid #1890ff;
  }
  /deep/ .ant-checkbox-wrapper {
    border: 1px solid rgba(0, 0, 0, 0.15);
    margin-right: 12px;
    margin-bottom: 12px;
    border-radius: 2px;
    .ant-checkbox {
      display: none;
    }
  }
  /deep/ .ant-checkbox-wrapper-disabled {
    span {
      color: rgba(0, 0, 0, 0.65);
    }
    &.ant-checkbox-wrapper-checked {
      span {
        color: #1890ff !important;
      }
    }
  }
  /deep/.ant-checkbox-wrapper-checked {
    color: #1890ff;
    border: 1px solid #1890ff;
  }
  /deep/ .ant-radio-wrapper-disabled {
    span {
      color: rgba(0, 0, 0, 0.65);
    }
    &.ant-radio-wrapper-checked {
      span {
        color: #1890ff !important;
      }
    }
  }
}
.line {
  margin-bottom: 12px;
}
.next-tree {
  margin-left: 0px;
}
.next-leaf {
  margin-right: 2px;
}
</style>
